<!DOCTYPE html>
<html>
<head>
    <title>文章1</title>
    <#include "../../include/head-file.ftl">
    <script src="${base}/static/mdiy/index.js"></script>
</head>
<body>
<div id="form" v-cloak>
    <el-header class="ms-header ms-tr" height="50px">
        <el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="reportHtml()" :loading="saveDisabled">保存
        </el-button>
        <el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)">返回
        </el-button>
    </el-header>
    <el-main class="ms-container" style="position:relative;">
        <el-scrollbar class="ms-scrollbar" style="height: 100%;">
            <el-tabs v-model="activeName" style="height: calc(100% - 10px);">
                <el-tab-pane style="position:relative;" v-for="(item, index) in editableTabs" :key="index"
                             :label="item.title" :name="item.name">
                    <el-form v-if="item.title=='文章编辑'" ref="form" :model="form" :rules="rules" label-width="140px"
                             size="mini">
                        <el-row gutter="0" justify="start" align="top">
                            <el-col :span="returnIsShow?'12':'24'">
                                <el-form-item label="文章标题" prop="contentTitle">
                                    <el-input v-model="form.contentTitle"
                                              :disabled="false"
                                              :style="{width:  '100%'}"
                                              :clearable="true"
                                              placeholder="请输入文章标题">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row gutter="0" justify="start" align="top">
                            <el-col span="12" v-if="returnIsShow">
                                <el-form-item label="所属栏目" prop="categoryId">
                                    <treeselect v-model="form.categoryId"
                                                :disable-branch-nodes="true"
                                                :normalizer="node=>{
                                                return {
                                                    id: node.id,
                                                    label: node.categoryTitle,
                                                    children: node.children
                                                }}"
                                                @change="categoryChange"
                                                :options="contentCategoryIdOptions" placeholder="请选择"></treeselect>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row gutter="0" justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="文章属性" prop="contentType">
                                    <el-select v-model="form.contentType"
                                               :style="{width: '100%'}"
                                               :filterable="false"
                                               :disabled="false"
                                               :multiple="true" :clearable="true"
                                               placeholder="请选择文章属性">
                                        <el-option v-for='item in contentTypeOptions' :key="item.dictValue"
                                                   :value="item.dictValue"
                                                   :label="item.dictLabel"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row gutter="0" justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="文章来源" prop="contentSource">
                                    <el-input v-model="form.contentSource"
                                              :disabled="false"
                                              :style="{width:  '100%'}"
                                              :clearable="true"
                                              placeholder="请输入文章来源">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row gutter="0" justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="发布时间" prop="contentDatetime">
                                    <el-date-picker
                                            v-model="form.contentDatetime"
                                            placeholder="请选择发布时间"
                                            start-placeholder=""
                                            end-placeholder=""
                                            :readonly="false"
                                            :disabled="false"
                                            :editable="true"
                                            :clearable="true"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            :style="{width:'100%'}"
                                            type="date">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row
                                gutter="0"
                                justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="文章作者" prop="contentAuthor">
                                    <el-input v-model="form.contentAuthor"
                                              :disabled="false"
                                              :style="{width:  '100%'}"
                                              :clearable="true"
                                              placeholder="请输入文章作者">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="文章缩略图" prop="contentImg">
                            <el-upload
                                    :file-list="form.contentImg"
                                    :action="ms.base+'/file/upload.do'"
                                    :on-remove="contentImghandleRemove"
                                    :style="{width:''}"
                                    :limit="1"
                                    :on-exceed="contentImghandleExceed"
                                    :disabled="false"
                                    :data="{uploadPath:'/cms/content','isRename':true ,'appId':true}"
                                    :on-success="contentImgSuccess"
                                    accept="image/*"
                                    list-type="picture-card">
                                <i class="el-icon-plus"></i>
                                <div slot="tip" class="ms-form-tip">
                                    最多上传1张图片（需上传图片宽高比例4:3，比如：600x450，800x600，宽度不低于600px）
                                </div>
                            </el-upload>
                        </el-form-item>
                        <el-row
                                gutter="0"
                                justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="关键字" prop="contentKeyword">
                                    <el-input
                                            :disabled="false"
                                            v-model="form.contentKeyword"
                                            :style="{width: '100%'}"
                                            placeholder="请输入文章关键字">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row
                                gutter="0"
                                justify="start" align="top">
                            <el-col span="12">
                                <el-form-item label="描述" prop="contentDescription">
                                    <el-input
                                            type="textarea" :rows="5"
                                            :disabled="false"
                                            v-model="form.contentDescription"
                                            :style="{width: '100%'}"
                                            placeholder="请输入对该文章的简短描述，以便用户查看文章简略">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row
                                gutter="0"
                                justify="start" align="top">
                            <el-col span="12">
                                <el-form-item  label="选择方式" prop="selStyle">
                                    <el-radio-group v-model="form.selStyle">
                                        <el-radio :label="1" :disabled="form.generateType!=0&&form.generateType!=1">自定义编辑</el-radio>
                                        <el-radio :label="2" :disabled="form.generateType!=0&&form.generateType<=1">自定义组合指标</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row
                                gutter="0"
                                justify="start" align="top" v-if="form.selStyle==1">
                            <el-col span="12">
                                <el-form-item label="本地上传：" prop="localUpload">
                                    <el-upload
                                            :action="ms.base+'/file/upload.do'"
                                            :style="{width:''}"
                                            :disabled="false"
                                            :data="{uploadPath:'/cms/content','isRename':true ,'appId':true}"
                                            :on-success="onUploadFileSuccess"
                                            :on-remove="onRemoveFile"
                                            accept="*"
                                            :file-list="form.localUpload">
                                        <el-button type="default" icon="el-icon-upload2" size="mini">上传文档</el-button>
                                        <div slot="tip" class="ms-form-tip">
                                            支持扩展名：word，excel，ppt，visio,pdf...
                                        </div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row
                                gutter="0"
                                justify="start" align="top" v-if="form.selStyle==1">
                            <el-col span="12">
                                <el-form-item label="文档管理中选择：" prop="fileId">
                                    <#--<el-select-->
                                    <#--v-model="form.fileId"-->
                                    <#--placeholder="一个文档的名称"-->
                                    <#--size="mini"-->
                                    <#--filterable-->
                                    <#--remote-->
                                    <#--:remote-method="remoteMethod"-->
                                    <#--v-loadmore="documentLoadMore"-->
                                    <#--:style="{width: '100%'}">-->
                                    <#--<el-option-->
                                    <#--v-for="item in documentData"-->
                                    <#--:key="item.id"-->
                                    <#--:label="item.fileName+'('+item.filePathEllipsis+')'"-->
                                    <#--:value="item.id"-->
                                    <#--:title="item.filePath"-->
                                    <#-->-->
                                    <#--</el-option>-->
                                    <#--</el-select>-->
                                    <el-button type="primary"  size="mini"  @click="showDocumentDialog()">选择文档</el-button>
                                    <div v-if="form.fileOriginName">{{form.fileOriginName}}</div>
                                    <div class="ms-form-tip">
                                        支持扩展名：word，excel，ppt，visio,pdf...
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <#--<el-row-->
                        <#--gutter="0"-->
                        <#--justify="start" align="top">-->
                        <#--<el-col span="12">-->
                        <#--<el-form-item label="自定义顺序" prop="contentSort">-->
                        <#--<el-input-number-->
                        <#--v-model="form.contentSort"-->
                        <#--:disabled="false"-->
                        <#--controls-position="">-->
                        <#--</el-input-number>-->
                        <#--</el-form-item>-->
                        <#--</el-col>-->
                        <#--</el-row>-->
                        <el-form-item label="文章内容" prop="contentDetails" v-if="form.selStyle==1">
                            <vue-ueditor-wrap style="line-height: 0px" v-model="form.contentDetails"
                                              :config="editorConfig"></vue-ueditor-wrap>
                        </el-form-item>

                        <el-row gutter="0" justify="start" align="top" v-if="form.selStyle==2">
                            <el-col span="12">
                                <el-form-item label="自定义组合指标" prop="customIndicator">
                                    <el-select v-model="form.customIndicator"
                                                           :style="{width: '100%'}"
                                                           :filterable="false"
                                               :disabled="form.generateType>=1"
                                                           placeholder="请选择自定义组合指标"
                                                           @change="getIndicatorReport">
                                        <el-option v-for='item in customIndicatorOptions' :key="item.type"
                                                   :value="item.type"
                                                   :label="item.name"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="12">
                                <el-form-item class="tip" >
                                    <el-tooltip class="item" effect="dark" content="指标默认统计范围为近一周" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="已选内容"   v-if="form.selStyle==2 && indicatorReportSelect.length>0">
                            <el-row :gutter="20"  class="zb-el-row-sel" type="flex">
                                <el-col :span="6" v-for = "(item,index) in indicatorReportSelect" :key="item.id" class="zb-el-col" >
                                    <el-card :key="index" style="min-height: 170px"  class="box-card">
                                        <div style="height: 10vh">
                                            <img :src="item.image?item.image:'${base}/static/images/zb-rk-2.png'" class="image"/>
                                        </div>
                                        <el-divider></el-divider>
                                        <div class="bottom clearfix" style="display: flex">
                                            <div style="width:90%">{{item.metricName}}</div>
                                            <div style="width:10%;text-align: end;align-self: center;"> <el-checkbox v-model="item.checked" @change="value => handleCheckedChangeSel(value,item)" :disabled="form.generateType>=1"></el-checkbox></div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-divider v-if="form.selStyle==2 && indicatorReportSelect.length>0"></el-divider>
                        <el-form-item v-if="form.generateType==0">
                            <el-row :gutter="20"  class="zb-el-row" type="flex" v-if="form.selStyle==2">
                                <el-col :span="6" v-for = "(item,index) in indicatorReport" :key="item.id" class="zb-el-col" >
                                    <el-card :key="index" style="min-height: 160px;" class="box-card">
                                        <div style="height: 10vh">
                                            <img :src="item.image?item.image:'${base}/static/images/zb-rk-2.png'" class="image"/>
                                        </div>
                                        <el-divider></el-divider>
                                        <div class="bottom clearfix" style="display: flex">
                                            <div style="width:90%">{{item.metricName}}</div>
                                            <div style="width:10%;text-align: end;align-self: center;"> <el-checkbox v-model="item.checked" @change="value => handleCheckedChange(value,item)"></el-checkbox></div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <div :id="'model'+index" v-else></div>
                </el-tab-pane>
            </el-tabs>
        </el-scrollbar>
    </el-main>
    <el-dialog title="文档管理中选择" :visible.sync="dialogVisible" width="600px" append-to-body v-cloak>
        <el-input v-model="searchDoc"
                  :disabled="false"
                  :style="{width:  '100%'}"
                  :clearable="true"
                  placeholder="搜索文档"
                  @input="searchDocChange()"
                  style="margin-top: 10px">
        </el-input>
        <el-scrollbar class="ms-scrollbar" style="height: 100%;">
            <el-table
                    :data="tableDocumentData"
                    ref="searchDocTable"
                    style="width: 100%"
                    row-key="fileId"
                    border
                    lazy
                    default-expand-all
                    :show-header="false"
                    :load="load"
                    height="calc(100vh - 360px)"
                    v-loading="documentLoading"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="label"
                        label="文档名称"
                >
                    <template slot-scope="scope,text">
                        <span style="cursor: default;">
                            {{ scope.row.label }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <div slot="footer">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="docSelectConfirm()">确 认</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>
<script>
    var form;
    form = new Vue({
        el: '#form',
        directives:{
            'loadmore':{
                bind: function (el,binding) {
                    // 获取element-ui定义好的scroll盒子
                    var SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                    SELECTWRAP_DOM.addEventListener('scroll', function(e) {
                        /*
                        * scrollHeight 获取元素内容高度(只读)
                        * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                        * clientHeight 读取元素的可见高度(只读)
                        * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                        * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                        */
                        var condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.offsetHeight;
                        if(condition) {
                            binding.value();
                        }
                    })
                }
            }
        },
        data: function () {
            return {
                saveDisabled: false,
                activeName: 'form',
                //自定义模型实例
                model: undefined,
                editableTabs: [{
                    title: '文章编辑',
                    name: 'form'
                }],
                editorConfig: ms.editorConfig,
                contentCategoryIdOptions: [],
                returnIsShow: true,
                type: '',
                //表单数据
                form: {
                    id: 0,
                    // 文章标题
                    contentTitle: '',
                    // 所属栏目
                    categoryId: undefined,
                    // 文章类型
                    contentType: [],
                    // 是否显示
                    contentDisplay: '0',
                    // 文章作者
                    contentAuthor: '',
                    // 文章来源
                    contentSource: '',
                    // 自定义顺序
                    contentSort: 0,
                    // 文章缩略图
                    contentImg: [],
                    // 描述
                    contentDescription: '',
                    // 关键字
                    contentKeyword: '',
                    //本地上传
                    localUpload: [],
                    //文档管理中上传
                    fileId: '',
                    // 文章内容
                    contentDetails: '',
                    contentDatetime: ms.util.date.fmt(Date.now(), "yyyy-MM-dd"),
                    //选择方式
                    selStyle:1,
                    //选择的自定义指标id
                    metricIds:[],
                    generateType: 0,
                },
                contentTypeOptions: [],
                categoryIdOptions: [],
                contentDisplayOptions: [{
                    "value": "0",
                    "label": "是"
                }, {
                    "value": "1",
                    "label": "否"
                }],
                customIndicatorOptions:[],
                customIndicator:'',
                //指标报告
                indicatorReport:[],
                //已选指标内容
                indicatorReportSelect:[],
                rules: {
                    // 文章标题
                    contentTitle: [{"required": true, "message": "文章标题不能为空"},
                        {"max": 30, "message": "文章标题长度不可超过30个字符"}],
                    // 发布时间
                    contentDatetime: [{"required": true, "message": "发布时间不能为空"}],
                    categoryId: [{"required": true, "message": "所属栏目不能为空"}],
                    //文章作者
                    contentAuthor: [{"required": true, "message": "文章作者不能为空"}],
                    //文章缩略图
                    contentImg: [{"required": true, "message": "文章缩略图不能为空"}],
                    // 关键字
                    contentKeyword: [{"max": 15, "message": "关键字长度不可超过15个字符"}],
                    // 描述
                    contentDescription: [{"max": 500, "message": "描述长度不可超过500个字符"}],
                    //文章内容
                    contentDetails: [{"required": true, "message": "文章内容不能为空"}],
                    //选择方式
                    selStyle: [{"required": true, "message": "选择方式不能为空"}],
                },
                dialogVisible: false,
                //文档选择
                documentLoading: false,
                documentForm: {
                    currentPage: 1,
                    pageSize: 10,
                    queryTxt:''
                },
                documentData: [],
                canMore:true,
                tableDocumentData: [],
                currentRowDocumentData:null,
                searchDoc:'',
            };
        },
        watch: {},
        computed: {
            currCategory: function () {
                var that = this;
                return this.categoryIdOptions.find(function (value) {
                    return value.id === that.form.categoryId;
                });
            }
        },
        methods: {
            save:function() {
                var _this = this;

                var that = this; //自定义模型需要验证

                if (this.model && !this.model.validate()) {
                    this.activeName = 'custom-name';
                    return;
                }

                var url = ms.manager + "/cms/content/save.do";

                if (that.form.id > 0) {
                    url = ms.manager + "/cms/content/update.do";
                }
                this.$refs.form[0].validate(function (valid) {
                    if (valid) {
                        that.saveDisabled = true; //判断

                        // if (that.categoryIdOptions.filter(function (f) {
                        //     return f['id'] == that.form.categoryId;
                        // })[0].categoryType == '2' && that.returnIsShow) {
                        //     that.$notify({
                        //         title: '提示',
                        //         message: '所属栏目不能为封面',
                        //         type: 'error'
                        //     });
                        //     that.saveDisabled = false;
                        //     return;
                        // }

                        var data = JSON.parse(JSON.stringify(that.form));
                        if (data.contentType) {
                            data.contentType = data.contentType.join(',');
                        }

                        data.contentImg = JSON.stringify(data.contentImg);
                        data.localUpload = JSON.stringify(data.localUpload);
                        ms.http.post(url, data).then(function (data) {
                            if (data.result) {
                                //保存时需要赋值关联ID
                                if (that.model) {
                                    that.model.form.linkId = data.data.id;
                                    that.model.save();
                                }
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 1000,
                                    onClose: function () {
                                        if (that.returnIsShow) {
                                            javascript: history.go(-1);
                                        } else {
                                            //如果是顶级封面或封面，则重新加载,避免文章和自定义模型重复保存
                                            location.reload();
                                        }
                                        that.saveDisabled = false;
                                    }
                                });

                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: data.msg,
                                    type: 'warning'
                                });
                                that.saveDisabled = false;
                            }

                        });
                    } else {
                        _this.activeName = 'form';
                        return false;
                    }
                });
            },
            removeModel: function () {
                var that = this;
                var model = document.getElementById('model1');
                var custom = document.getElementById('c_model');

                if (custom) {
                    model.removeChild(custom);
                }

                that.model = undefined;
            },
            categoryChange: function () {
                this.changeModel();
            },
            changeModel: function () {
                var that = this;
                that.editableTabs = [that.editableTabs[0]];

                if (this.currCategory) {
                    if (this.currCategory.mdiyModelId) {
                        that.rederModel(this.currCategory.mdiyModelId)
                    }
                }
            },
            rederModel: function (modelId) {
                var that = this;
                that.editableTabs.push({
                    title: '',
                    name: 'custom-name'
                });
                ms.mdiy.model.extend("model1", {id: modelId}, {linkId: that.form.id}, true).then(function (obj) {
                    that.model = obj;
                    that.editableTabs[1].title = obj.modelName
                });

            },
            getValue: function (data) {
                this.form.categoryId = data.id;
            },
            //获取当前文章
            get: function (id) {
                var that = this;
                ms.http.get(ms.manager + "/cms/content/get.do", {
                    "id": id
                }).then(function (res) {
                    if (res.result && res.data) {
                        if (res.data.contentType && res.data.contentType != '') {
                            res.data.contentType = res.data.contentType.split(',');
                        } else {
                            res.data.contentType = [];
                        }

                        if (res.data.contentImg) {
                            res.data.contentImg = JSON.parse(res.data.contentImg);
                            res.data.contentImg.forEach(function (value) {
                                value.url = ms.base + value.path;
                            });
                        } else {
                            res.data.contentImg = [];
                        }

                        if(res.data.localUpload){
                            res.data.localUpload = JSON.parse(res.data.localUpload);
                            // 是否是数组
                            if(res.data.localUpload instanceof Array) {
                                res.data.localUpload.forEach(function (value) {
                                    value.url = ms.base + value.path;
                                });
                            }
                            // that.rules.contentDetails[0].required = false;
                        }else{
                            res.data.localUpload = [];
                            // that.rules.contentDetails[0].required = true;
                        }

                        that.searchDoc = res.data.fileOriginName;
                        // var filePathEllipsis = "";
                        // if(res.data.filePath && res.data.filePath.length>=1){
                        //     res.data.filePath = res.data.filePath.replaceAll("/","\\")
                        //     var paths = res.data.filePath.split("\\");
                        //     if(paths.length>4){
                        //         filePathEllipsis = paths[0]+"\\"+paths[1]+"\\"+paths[2]+"\\"+paths[3]+"\\...";
                        //     }else{
                        //         filePathEllipsis = res.data.filePath;
                        //     }
                        //     that.documentData=[
                        //         {id:res.data.fileId,fileName:res.data.fileOriginName,filePath:res.data.filePath,filePathEllipsis:filePathEllipsis}
                        //     ]
                        // }

                        that.form = res.data;
                        that.$set(that.form, 'selStyle', 1);
                        that.form.generateType = res.data.generateType;
                        console.log(that.form.generateType)
                        that.indicatorReportSelect = []
                        if(that.form.metricIds){
                            that.form.metricIds = JSON.parse(that.form.metricIds);
                            if(that.form.metricIds.length>0) {
                                that.$set(that.form, 'selStyle', 2);
                            }
                        }
                        var category = that.categoryIdOptions.filter(function (f) {
                            return f['id'] == that.form.categoryId;
                        });

                        if (category.length == 1) {
                            if (category[0].categoryType == '2') {
                                that.returnIsShow = false;
                            }
                        }
                        that.changeModel();
                    }
                });
            },
            //根据封面获取当前文章
            getFromFengMian: function (categoryId) {
                var that = this;
                ms.http.get(ms.manager + "/cms/content/getFromFengMian.do", {
                    "categoryId": categoryId
                }).then(function (res) {
                    if (res.result) {
                        if (res.data != null) {
                            if (res.data.contentType && res.data.contentType != '') {
                                res.data.contentType = res.data.contentType.split(',');
                            } else {
                                res.data.contentType = [];
                            }

                            if (res.data.contentImg) {
                                res.data.contentImg = JSON.parse(res.data.contentImg);
                                res.data.contentImg.forEach(function (value) {
                                    value.url = ms.base + value.path;
                                });
                            } else {
                                res.data.contentImg = [];
                            }

                            that.form = res.data;
                            var category = that.categoryIdOptions.filter(function (f) {
                                return f['id'] == that.form.categoryId;
                            });

                            if (category.length == 1) {
                                if (category[0].categoryType == '2') {
                                    that.returnIsShow = false;
                                }
                            }
                        }
                        that.changeModel();
                    } else {
                        that.$notify({
                            title: '失败',
                            message: "获取错误",
                            type: 'warning'
                        });
                    }
                });
            },
            //获取contentCategoryId数据源
            contentCategoryIdOptionsGet: function () {
                var that = this;
                ms.http.get(ms.manager + "/cms/category/list.do", {
                    pageSize: 9999
                }).then(function (res) {
                    if (res.result) {
                        res.data.rows.forEach(function (item) {
                            if (item.categoryType == '2' || item.categoryType == '3') {
                                item.isDisabled = true;
                            }
                        });
                        that.contentCategoryIdOptions = ms.util.treeData(res.data.rows, 'id', 'categoryId', 'children');
                        that.categoryIdOptions = res.data.rows;

                        //获取到栏目数据之后再进行初始化
                        that.init();
                        that.contentTypeOptionsGet();
                    }
                });
            },
            //获取contentType数据源
            contentTypeOptionsGet: function () {
                var that = this;
                ms.http.get(ms.base + '/mdiy/dict/list.do', {
                    dictType: '文章属性',
                    pageSize: 99999
                }).then(function (data) {
                    if (data.result) {
                        data = data.data;
                        that.contentTypeOptions = data.rows;
                        that.customIndicatorOptionsGet();
                    }
                });
            },
            //contentImg文件上传完成回调
            contentImgSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.form.contentImg.push({
                        url: file.url,
                        name: file.name,
                        path: response.data,
                        uid: file.uid
                    });
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }

            },
            contentImghandleRemove: function (file, files) {
                var index = -1;
                index = this.form.contentImg.findIndex(function (text) {
                    return text == file;
                });

                if (index != -1) {
                    this.form.contentImg.splice(index, 1);
                }
            },
            //上传超过限制
            contentImghandleExceed: function (files, fileList) {
                this.$notify({
                    title: '失败',
                    message: '当前最多上传1个文件',
                    type: 'warning'
                });
            },
            //查询列表
            list: function (categoryId) {
                var that = this;
                ms.http.post(ms.manager + "/cms/content/list.do", {
                    categoryId: categoryId
                }).then(function (res) {
                    if (res.result && res.data.total > 0) {
                        if (res.data.rows[0].contentType) {
                            res.data.rows[0].contentType = res.data.rows[0].contentType.split(',');
                        }

                        if (res.data.rows[0].contentImg) {
                            res.data.rows[0].contentImg = JSON.parse(res.data.rows[0].contentImg);
                            res.data.rows[0].contentImg.forEach(function (value) {
                                value.url = ms.base + value.path;
                            });
                        } else {
                            res.data.rows[0].contentImg = [];
                        }

                        that.form = res.data.rows[0];
                    }
                });
            },
            //只有在渲染完栏目数据之后才会初始化
            init: function () {
                this.form.id = ms.util.getParameter("id");
                this.type = ms.util.getParameter("type");

                //在指定栏目下新增或编辑文章时
                var categoryId = ms.util.getParameter("categoryId");
                if (categoryId) {
                    this.form.categoryId = categoryId;
                    //如果是封面栏目直接跳转
                    if (this.type) {
                        this.getFromFengMian(this.form.categoryId);
                        this.returnIsShow = false;
                        //指定非封面栏目编辑文章
                    } else if (this.form.id) {
                        this.get(this.form.id);
                        //指定栏目新增文章渲染自定义模型
                    } else {
                        this.changeModel();
                    }
                    //不指定栏目编辑文章
                } else if (this.form.id) {
                    this.get(this.form.id);
                }//else 如果即不指定栏目新增文章，又不是编辑文章就不渲染自定义模型

            },
            //本地上传完成回调
            onUploadFileSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.form.localUpload.push({
                        url: response.data,
                        name: file.name,
                        path: response.data,
                        uid: file.uid
                    });
                    // this.rules.contentDetails[0].required = false
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }

            },
            onRemoveFile: function (file, fileList) {
                var index = -1;
                index = this.form.localUpload.findIndex(function (text) {
                    return text == file;
                });

                if (index != -1) {
                    this.form.localUpload.splice(index, 1);
                }
                // if (fileList.length == 0) {
                // this.rules.contentDetails[0].required = true
                // }
            },
            //文档选择下拉列表
            documentList: function (isScroll) {
                var that = this;
                this.documentLoading = true;
                var form = {
                    pageNo: that.documentForm.currentPage,
                    pageSize: that.documentForm.pageSize,
                    fileName: that.documentForm.queryTxt
                };
                ms.http.post(ms.manager + "/cms/document/search.do", Object.assign({}, form), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    that.documentLoading = false;
                    if (!res.result || res.data.total <= 0) {
                        that.documentData = [];
                    } else {
                        res.data.records.forEach(function (item) {
                            item.filePathEllipsis = item.filePath;
                            if(item.filePath.length>=1){
                                var paths = item.filePath.split("\\");
                                if(paths.length>4){
                                    item.filePathEllipsis = paths[0]+"\\"+paths[1]+"\\"+paths[2]+"\\"+paths[3]+"\\...";
                                }
                            }
                        });
                        if(isScroll){
                            that.documentData=that.documentData.concat(res.data.records);
                        }else{
                            that.documentData = res.data.records;
                        }


                        if(res.data.total === that.documentData.length){
                            that.canMore = false;
                        }else{
                            that.canMore = true;
                        }
                    }
                }).catch(function (err) {
                    that.documentLoading = false;
                });
            },
            // 文档选择触底滚动加载事件
            documentLoadMore: function () {
                if(this.canMore){
                    this.documentForm.currentPage++;
                    this.documentList(true);
                }

            },
            remoteMethod: function (query) {
                if (query !== '') {
                    this.documentForm.queryTxt = query;
                    this.documentForm.currentPage = 1;
                    this.documentList(false);
                } else {
                    this.documentData = [];
                }
            },
            showDocumentDialog:function(){
                this.dialogVisible=true;
                this.documentList1('')
            },
            documentList1: function (parentDirId,resolve) {
                var that = this;
                this.documentLoading = true;
                // var page = {
                //     // pageNo: that.currentPage,
                //     pageSize: "999999"//that.pageSize
                // };
                var form = {fileId:parentDirId,fileName:this.searchDoc}
                ms.http.post(ms.manager + "/cms/document/file/list.do", Object.assign({}, form),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    that.documentLoading = false;

                    if (!res.result) {
                        that.emptyText = '暂无数据';

                        if(parentDirId==""){
                            that.tableDocumentData = [];
                        }else{
                            resolve([])
                        }
                    } else {
                        res.data.forEach(function (item) {
                            if(item.children && item.children.length==0){
                                item.hasChildren = true;
                            }else if(!item.children){
                                delete item.children;
                            }
                        });
                        if(parentDirId==""){
                            that.emptyText = '';
                            that.tableDocumentData = res.data;
                        }else{
                            resolve(res.data)
                        }
                        if(that.form.fileId) {
                            that.getSelectNode(that.tableDocumentData);
                            that.$nextTick(function () {
                                that.$refs.searchDocTable.setCurrentRow(that.currentRowDocumentData);
                            });
                        }
                    }
                });
            },
            getSelectNode :function(data) {
                if(!data){
                    return;
                }
                for(var i in data){
                    var item = data[i];
                    if(item.fileId === this.form.fileId){
                        this.currentRowDocumentData = item;
                        break;
                    } else if(item.children && item.children.length > 0){
                        this.getSelectNode(item.children);
                    }

                }
            },
            load: function (tree, treeNode, resolve) {
                this.documentList1(tree.fileId,resolve);
            },
            handleCurrentChange:function(val) {
                this.currentRowDocumentData = val;
            },
            // 表格单行点击事件
            dataTableRowClick:function(row, column, event) {
                if(this.currentRowDocumentData && this.currentRowDocumentData.fileId===row.fileId){
                    this.$refs.searchDocTable.setCurrentRow();
                    this.currentRowDocumentData = null;
                }else{
                    this.currentRowDocumentData = row;
                }
            },
            searchDocChange:function(){
                this.documentList1('')
            },
            docSelectConfirm:function () {
                if(this.currentRowDocumentData && !this.currentRowDocumentData.children){
                    this.form.fileId = this.currentRowDocumentData.fileId;
                    this.form.fileOriginName = this.currentRowDocumentData.label;
                    this.dialogVisible=false;
                }else {
                    this.$notify({
                        title: '失败',
                        message: '请选择文档',
                        type: 'warning'
                    });
                }
            },
            //获取自定义组合指标数据源
            customIndicatorOptionsGet: function () {
                var that = this;
                ms.http.get(ms.manager + '/report/type.do').then(function (data) {
                    if (data.result) {
                        that.customIndicatorOptions = data.data;
                        console.log("that.form.id",that.form.id)
                        console.log("ms.util.getParameter('id')",ms.util.getParameter("id"))
                        if(ms.util.getParameter('id')>0){//编辑
                            that.customIndicatorOptions.forEach(function (item){
                                that.form.customIndicator=item.type
                                that.indicatorReportOptionsGet(item.type);
                            })
                        }else{//新增
                            that.form.customIndicator=that.customIndicatorOptions[0].type
                            that.indicatorReportOptionsGet(that.form.customIndicator);
                        }


                    }
                });
            },
            //获取自定义组合指标-报告指标
            indicatorReportOptionsGet: function (type) {
                var that = this;
                ms.http.get(ms.manager + '/report/metric.do',{
                    type: type
                }).then((data) => {
                    if (data.result) {
                        data.data.forEach((item) => {
                            if(that.form.metricIds && that.form.metricIds.length>0){
                                var indexIds = []
                                that.form.metricIds.forEach(function (id,index){
                                    if(id === item.id){
                                        item.checked=true;
                                        that.indicatorReportSelect.push(item)
                                        indexIds.push(index)
                                    }
                                });
                                indexIds.forEach(function (itemIndex){
                                    that.form.metricIds.splice(itemIndex,1)
                                })

                            }

                            if(that.indicatorReportSelect.length>0){
                                that.indicatorReportSelect.forEach(function (itemSel){
                                    if(item.metricName === itemSel.metricName && itemSel.checked){
                                        item.checked=true;
                                    }
                                });
                            }else{
                                item.checked=false;
                            }

                            if(item.metricName==='进出岛行为分析' || item.metricName==='人口流动与经济指标情况' ||
                                item.metricName==='岛内热点事件' || item.metricName==='特定企业员工聚集预警' ||
                                item.metricName==='热力图分析' )
                            {
                                item.image = ms.base + '/static/images/zb-rk-1.png';
                            }else if(item.metricName==='常住人口'){
                                item.image = ms.base + '/static/images/zb-rk-1.png';
                            }else if(item.metricName==='流动人口'||item.metricName==='境外人口'){
                                item.image = ms.base + '/static/images/zb-rk-2.png';
                            }else if(item.metricName==='人口地理分布'){
                                item.image = ms.base + '/static/images/zb-rk-3.png';
                            }else if(item.metricName==='走私人员出行OD分析'){
                                item.image = ms.base + '/static/images/zb-rk-4.png';
                            }else if(item.metricName==='沿海岸线人口分布分析'){
                                item.image = ms.base + '/static/images/zb-rk-5.png';
                            }else if(item.metricName==='城市人口迁徙'){
                                item.image = ms.base + '/static/images/zb-rk-6.png';
                            }else if(item.metricName==='通勤概况分析'){
                                item.image = ms.base + '/static/images/zb-tq-1.png';
                            }else if(item.metricName==='通勤时间分布特征'){
                                item.image = ms.base + '/static/images/zb-tq-2.png';
                            }else if(item.metricName==='通勤人口职住地分布'){
                                item.image = ms.base + '/static/images/zb-tq-3.png';
                            }else if(item.metricName==='通勤出行方式分析'){
                                item.image = ms.base + '/static/images/zb-tq-4.png';
                            }else{
                                item.image = ms.base+'/static/images/zb-rk-2.png';
                            }
                        });
                        that.indicatorReport = data.data;
                        that.form.customIndicator=type

                    }
                });
            },
            getIndicatorReport:function (val) {
                this.indicatorReportOptionsGet(val);
            },
            changeCheckStyle: function (value) {

            },
            handleCheckedChange:function (value,item) {
                if(value){
                    this.indicatorReportSelect.push(item);
                }else{
                    var itemTmp={};
                    this.indicatorReportSelect.forEach(function (itemSel){
                        if(itemSel.metricName === item.metricName){
                            itemSel.checked = value;
                            itemTmp = itemSel;
                        }
                    });
                    this.indicatorReportSelect.splice(this.indicatorReportSelect.indexOf(itemTmp),1);
                }

            },
            handleCheckedChangeSel:function (value,item) {
                if(!value){
                    this.indicatorReportSelect.splice(this.indicatorReportSelect.indexOf(item),1);
                    this.indicatorReport.forEach(function (item1){
                        if(item1.metricName === item.metricName){
                            item1.checked = value;
                        }
                    });
                }
            },
            //生成报告：传指标ID
            reportHtml: function () {
                if(this.form.selStyle === 2){
                    if(this.indicatorReportSelect.length>0){
                        var ids = this.indicatorReportSelect.map(function (v) {
                            return v.id;
                        });
                        this.form.metricIds = JSON.stringify(ids) ;
                        var param = {
                            ids:ids,
                            title: this.form.contentTitle,
                            author: this.form.contentAuthor,
                            pubTime: this.form.contentDatetime,
                            readCount: 0
                        };
                        var that = this;
                        ms.http.post(ms.manager + '/report/html.do',param, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(function (data) {
                            if (data.result) {
                                if (that.form.generateType === 0) {
                                    that.form.contentDetails = data.data;
                                }
                                that.save();
                            }
                        });
                    }else{
                        this.$notify({
                            title: '失败',
                            message: '指标内容至少勾选一个',
                            type: 'warning'
                        });
                    }

                }else{
                    this.form.metricIds = "[]"
                    this.save();
                }


            },
        },
         created: function () {
             /*new Promise(resolve => {
                 this.contentCategoryIdOptionsGet();
                 resolve(this)
             }).then(res => {
                 new Promise(resolve => {
                     this.contentTypeOptionsGet();
                     resolve(this)
                 }).then(res => {
                     new Promise(resolve => {
                         this.customIndicatorOptionsGet();
                         resolve(this)
                     })
                 })
             })*/
            this.contentCategoryIdOptionsGet();
            /*this.contentTypeOptionsGet();
            this.customIndicatorOptionsGet();*/
        }
    });
</script>
<style>
    .el-select {
        width: 100%;
    }

    body {
        overflow: hidden;
    }

    #form {
        overflow: hidden;
    }
    .el-scrollbar__bar.is-vertical{
        width: 6px!important;
    }
    /*饿了么滚动样式*/

    .el-table__row:not([class*='el-table__row--level-']) .el-table__cell:first-child{
        padding-left: 20px;
    }
    .tip .el-form-item__content{
        margin-left: 10px !important;
    }


    .zb-el-row {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        /*margin-left: 130px !important;*/
        /*margin-right: 130px !important;*/
    }
    .zb-el-row-sel {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -17px;
    }
    .zb-el-col {
        /*border-radius: 4px;*/
        align-items: stretch;
        margin-bottom: 20px;
    }
    .bottom {
        margin-top: 13px;
        /*line-height: 12px;*/
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .box-card .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 123%;
        margin-top:36px;
        margin-bottom: 12px;
        margin-left: -20px;
    }
    .image {
        width: 100%;
        display: block;
    }
</style>
